<template v-if="show">
  <el-dialog :title="title" :visible.sync="show" width="90%">
    <span v-if="form.other">
      <el-form ref="form" :model="form" label-width="80px">
        <div class="x wf jc">
          <el-form-item label="名称" style="min-width: 200px" @focus="$event.currentTarget.select();">
            <el-input v-model="form.name" @focus="$event.currentTarget.select();" />
          </el-form-item>
          <!-- <el-form-item label="状态" class="x jc state" label-width="50px">
            <el-switch
              v-model="form.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="启用"
              :active-value="1"
              inactive-text="关闭"
              :inactive-value="0"
            />
          </el-form-item>-->
          <el-form-item label="隶属项目" v-if="form.pid">
            <el-input :value="$gd.project.getItem(form.pid).name" disabled />
          </el-form-item>
          <el-form-item label="列数" style="min-width: 100px" label-width="50px" v-else>
            <div class="x">
              <el-input
                v-model="form.prefix"
                @focus="$event.currentTarget.select();"
                style="max-width:120px"
              />
              <el-input v-model="form.col" @focus="$event.currentTarget.select();" />
              <el-input
                v-model="form.suffix"
                @focus="$event.currentTarget.select();"
                style="max-width:120px"
              />
            </div>
          </el-form-item>

          <el-form-item label="隶属部门" style="min-width: 200px">
            <el-cascader
              :show-all-levels="false"
              :options="tree"
              :props="{ value:'id',label:'name',checkStrictly: true}"
              v-model="userType"
            />
          </el-form-item>
        </div>
        <el-form-item label="包含工序" class="wf">
          <el-select
            v-model="form.process"
            multiple
            placeholder="请选择工序"
            v-if="$gd.process"
            class="wf"
          >
            <el-option
              v-for="item in $gd.process"
              :key="item.value"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单列物料">
          <el-table
            :data="info"
            border
            stripe
            highlight-current-row
            style="width: 100%"
            max-height="300px"
            height="300px"
          >
            <el-table-column fixed type="index" label="行号" width="50" />
            <el-table-column prop="item" label="id" width="80" />
            <el-table-column prop="uid" label="物料号" width="180">
              <template slot-scope="scope">
                <el-autocomplete
                  popper-class="my-autocomplete"
                  v-model="scope.row.uid"
                  :fetch-suggestions="uidSearch"
                  @focus="$event.currentTarget.select();"
                  placeholder="请输入物料号"
                  value-key="uid"
                >
                  <template slot-scope="{ item }">
                    <div
                      v-text="item.uid+item.name"
                      class="bx"
                      @click="handleSelect(item,scope.$index)"
                    />
                  </template>
                </el-autocomplete>
                <!-- @select="handleSelect":props="{value:'id'}" -->
              </template>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="180" />
            <el-table-column prop="sum" label="预计用量" width="100">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.sum"
                  @input="proving(scope.$index,scope)"
                  @focus="$event.currentTarget.select();"
                  placeholder="请输入预计用量"
                />
              </template>
            </el-table-column>
            <el-table-column prop="arrived" label="已到" width="100" />
            <el-table-column prop="use" label="已用" width="100" />
            <el-table-column prop="stock" label="库存" width="100" />
            <el-table-column prop="remarks" label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  @click="info.splice(scope.$index,1)"
                  v-text="'移除'"
                  type="primary"
                  size="mini"
                />
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" />
              </template>
            </el-table-column>
          </el-table>
          <el-button @click="info.push($cp(item))" v-text="'新增物料'" type="primary" size="mini" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.other.remarks"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="send(form)">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
// import name from "./name";
export default {
  // components: { name},
  props: ["fshow", "form"],
  watch: {
    fshow(a) {
      this.show = true;
    },
    form(a) {
      this.formChange(a);
      this.title = a.id ? "修改" : "新增";
      this.title += a.pid ? "列次" : "项目";
    },
    $gd(a) {
      this.$gdChange(a);
    }
  },
  data() {
    return {
      show: true,
      info: [],
      item: {
        id: 0,
        uid: "",
        name: "",
        sum: 0,
        arrived: 0,
        use: 0,
        stock: 0,
        remarks: ""
      },
      userType: [],
      tree: [],
      title: ""
    };
  },
  // computed() {return{}},
  created() {
    this.formChange(this.form);
    this.$gdChange(this.$gd);
  },
  methods: {
    send() {
      let v = this.$cp(this.form);
      v.info = this.info;
      try {
        for (let i = 0; i < v.info.length; i++) {
        if(!v.info[i].item) throw '第['+(i+1)+']行 请重新使用鼠标点击选择物料';
        if(!v.info[i].sum) throw '第['+(i+1)+']行 预计使用量不能为空';
      }
      } catch (error) {
        this.$message.error(error);
        return;
      }
      const d = {
        cmd: v.id ? 1 : 2,
        val: {
          token: sessionStorage.token,
          table: "project"
        }
      };
      let tmp = this.$del(v, "id");
      if (v.id) tmp.where = { id: v.id };
      d.val = Object.assign(d.val, tmp);
      this.$post(d, res => {
        console.log(res);
        if (res.result) {
          this.$emit("change", 202, res.result, !v.id);
          this.show = false;
        }
      });
    },
    uidSearch(queryString, cb) {
      var restaurants = this.$gd.items;
      var results = queryString
        ? restaurants.filter(
            (function(res) {
              return ret => {
                return ret.uid.toLowerCase().indexOf(res.toLowerCase()) === 0;
              };
            })(queryString)
          )
        : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect(a, b) {
      this.info[b].item = a.id;
      this.info[b].name = a.name;
    },
    proving(a) {
      const t = Number(this.info[a].sum);
      this.info[a].sum = t ? t : 0;
    },
    formChange(a) {
      if (!this.form.other || !this.$gd.userType) return;
      this.userType = this.$gd.userType.getTreeID(this.form.userType);
      if (!this.form.info) return;
      if (this.form.info.length) {
        this.info = this.$cp(a.info);
        // for (let i = 0; i < this.info.length; i++) {
        //   this.info[i].item = this.info[i].id;
        // }
      }
    },
    gdChange(a) {
      this.tree = this.$gd.userType.arr2tree();
    }
  }
};
</script>

<style lang="less" scoped>
.state /deep/ .el-form-item__content {
  margin-left: 0px !important;
  width: 7.25rem /* 116/16 */;
}
</style>
